<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/view/include/css-include.jsp"%>
<%@ include file="/view/include/jsp-include.jsp"%>
<%@ include file="/view/include/jquery-include.jsp"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>TMI</title>

<script type="text/javascript">
<%--============================= 전역변수 선언 ==========================--%>
var addCnt="";
   
    <%--============================= window onload ==========================--%>

    $().ready(function() {

        <%-- 달력 --%>
        calendar.makeCalender("sailingOn");
        calendar.makeCalender("pop_expireDate");
        
        if($("#roleId").val() == "3"){
        	$("#orderNumPop").attr("style", "display:none");
        	$("#bo_btn_add").attr("style", "display:none");
            $("#bo_btn").attr("style", "display:none");
        }
        
        var keyparam = '${ordPseq}';
        var keyparam2 = '${ordNo1}';
        var keyparam3 = '${ordNo2}';
        var keyparam4 = '${clearNo}';
        var keyparam5 = '${mawb}';
        var keyparam6 = '${hawb}';
        if(keyparam != null && keyparam != ""){
        	view(keyparam2+'-'+keyparam, keyparam2, keyparam3, keyparam, keyparam5, keyparam6);
        } 
        
        
        /* 오더 조회 팝업 버튼 */
        $("#searchBtn").bind("click",function(){
            orderNumPopCall();
        });
        
        $("#detailAddRow").bind("click",function(){
        	addCnt = $("table[id='packingDetailTable'] img[id='popImg']").index()+1;
        	
        	var dynamicAddRow = "<tr id='dynamicDetailAddRow'>"
        	    +'<td align="center" width="5%">New</td>'
        	    +'<td align="center"  width="10%"><input type="text" class="inST100"  name="batchNo" id="batchNo" maxlength="10" value=""/></td>'
        	    +'<td align="left"  width="15%"><input type="text" class="inST70"  maxlength="10" name="expireDate" id="expireDate'+addCnt+'" value = ""/></td>'
        	    +'<td align="center"  width="10%"><input type="text" class="inSTR100" name="goodsCode" id="goodsCode" readonly onFocus="blur();" value="" /></td>'
        	    +'<td align="left"   width="35%""><input type="text" class="inSTR90"  style="margin-top:3px;" name="goodsName" readonly onFocus="blur();" value=""/><img src="/images/web/bkn_zoom.gif" id="popImg" align="center" onclick="onProductPopup(this)";></td>'
        	    +'<td align="right" width="15"><input type="text" class="inST100"  name="qty" onkeydown="onlyNum(event);" maxlength="7" value=""/></td>'
        	    +'<td align="center"  width="10%"><input type="text" class="inSTR100" name="unit" readonly onFocus="blur();" value=""/></td>'
        	    +"<td width='5%'> &nbsp;&nbsp;&nbsp;&nbsp;<img src='images/web/ic_x.gif' align='right' alt='Delete' onclick='deleteTmpRow(this);'> </td>"    //행 추가후  삭제 버튼 추가
        	    +"</tr>";
        	    
        	    
            $("table[id='packingDetailTable']").prepend(dynamicAddRow);  // 전역변수로 잡아둔 값 셋팅
            calendar.makeCalender("expireDate"+addCnt);
            
        });
        
        /* 저장버튼 */
        $("#saveBtn").bind("click",function(){       
            $("form[name='packingFrm']").submit();
        });

        $("#reSetBtn").bind("click",function(){
            reSetFrm();
        });

        //삭제
        $("#deleteBtn").bind("click",function(){
            doDelete();
        });
        
        /* 메인폼 서브밋 */
        $("form[name='packingFrm']").ajaxForm({
            dataType: "json",
            beforeSerialize: function($form, options) {
                if( $("#ordNo1").val() == null || $("#ordNo1").val() == "" ){
                	alert("SEARCH!");
                    //alert("조회 후 입력 해주세요.");
                    return false;
                }
                //return $("form[name='packingFrm']").valid();  jquery 벨류데이션 플러그인 사용시
                 if( !validation() ){       //화면 항목 점검 시작
                    return false;
                }
                 if(!confirm("Save?")){
                    return false;
                 }
            },
            success:function(data) {
               if(data.result == true){
            	   if(data.resultMawbDupChk == "N"){
            		   alert("MAWB No : It’s same data as what already recorded");
                       $("#mawb").focus();
            	   }else if(data.resultHawbDupChk == "N"){
            		   alert("HAWB No : It’s same data as what already recorded");
                       $("#hawb").focus();
            	   }else{
	                   alert("Complete the save");
	                   searchDataMaping(data);   //조회 데이터 맵핑 펑션
            	   }
               }               
           },
           error:function(){alert("error!!");}
        }); 
        
    });
    
    <%--============================= function ==========================--%>
    

    function deleteTmpRow(obj){
        $(obj).parent().parent().remove();     // 사용자가 동적 생성한 ODR DETAIL ROW삭제
    }
    
    
    
    /* 삭제 펑션 */
    function doDelete(){
        if( $("#ordNo1").val() == "" || $("#ordNo2").val() == "" || $("#ordPseq").val() == "" ){
            alert("search plz.");
            return;
        }
        
        if(confirm("DELETE?")){
            $.post(
                    '/deleteDoPacking.json', {
                    ordNo1  : $("#ordNo1").val(),
                    ordNo2  : $("#ordNo2").val(),
                    ordPseq : $("#ordPseq").val(),
                    mawb    : $("#mawb").val(),
                    hawb    : $("#hawb").val()
                    },
                function(data) {
                        if(data.result == true){
                            alert("OK!!");
                            reSetFrm();    //DATA맵핑 
                            $("span[id='delBtn']").show();
                            $("span[id='addRow']").show();
                            
                        }else{
                            alert("error");
                        }
                });
        }
    }
    
    
    /* odrDetail 삭제 펑션 */
    function delOdrDetail(idx , rowNum){
        if(confirm("Delete?")){
            $.post(                                    //삭제Mothod 호출
                   '/delPackDetail.json', {
                    ordSeq : idx    // 파라미터명 : 값
                    },
              function(data) {
                    if(data.result == true){
                        alert("OK!");
                        $("#dynamicDetailSearchRow"+rowNum).remove();    // 삭제한ROW 삭제함..
                    }else{
                        alert("error: error!!");
                    }
           });  
        }
    }
    
    
    
    
    /* 조회 펑션 */
    function view(ordNum, ordNo1, ordNo2, ordPseq, mawb, hawb){
        $("#ordNum").val(ordNum);
        $("#ordNo1").val(ordNo1);
        $("#ordNo2").val(ordNo2);
        $("#ordPseq").val(ordPseq);
        $("#mawb").val(mawb);
        $("#hawb").val(hawb);

        $.post(
               '/getPackingView.json', {
                ordNo1 : ordNo1,
                ordNo2 : ordNo2,
                ordPseq : ordPseq,
                mawb : mawb,
                hawb : hawb
               },
           function(data) {
                if(  mawb == "" || hawb == ""){
                    $("#saveStatus").val("SAVE"); // 상태값 변경
                    
                    $("#mawb").attr({        // ordNo1 입력가능하게
                        onFocus : "",
                        readonly: false
                    }).removeClass("inSTR90").addClass("inST90");
                    $("#hawb").attr({        // ordNo1 입력가능하게
                        onFocus : "",
                        readonly: false
                    }).removeClass("inSTR90").addClass("inST90");
                    
                }else{
                    $("#saveStatus").val("UPDATE"); // 상태값 변경
                    
                    $("#mawb").attr({        // ordNo1 입력가능하게
                        onFocus : "this.blur();",
                        readonly: true
                    }).removeClass("inSTR0").addClass("inSTR90");
                    $("#hawb").attr({        // ordNo1 입력가능하게
                        onFocus : "this.blur();",
                        readonly: true
                    }).removeClass("inST90").addClass("inSTR90");
                    
                }
                
               searchDataMaping(data);    //DATA맵핑 
           });
        
    }
    

    /* searchData 맵핑 */
    function searchDataMaping(data){
        var val = ""; 
        for(var v in data.resultMap) {       //상단 조회 결과 맵핑 조회return값이 한건임
            $("#"+v).val(data.resultMap[v]);
        
            if(v == "remark"){
                textAreaKyUp(data.resultMap[v]);
            }
            if(v == "arrDate"){
            	
                if(data.resultMap[v] == "" || (data.resultMap[v] == null)){
                    $("span[id='delBtn']").show();
/*                     $("span[id='addRow']").show(); */
                    
                }else{
                	
/*                 	$("span[id='addRow']").hide(); */
                    $("span[id='delBtn']").hide();
                }
            }
            
            if(v == "sailingOn"){  
            	if(data.resultMap[v] == null){
            		$("span[id='addRow']").show();
                }else{
                	$("span[id='addRow']").hide();
                }
            }
            
        }
        
        
        
        
        //하단 그리드 맵핑
        var contents = "";
        
        var makeCalenderIndex = new Array();
        $.each(data.resultDetailList, function(index){  // List로 받아온값 (여러건)
            
            //(Detail 테이블에 조회결과 입히기 jquery말고 그냥 onclick 걸어줌.. (조회 후 del 번튼에 key값 param변수로 입력)
            var rowNum = index+1;
            
            contents += "<tr id='dynamicDetailSearchRow"+rowNum+"'>"
                +'<td align="center" width="5%">'+rowNum+'<input type="hidden" name="ordSeq" id="ordSeq" value="'+this.ordSeq+'">'
/*                 +'<input type="hidden" name="goodsCode" id="goodsCode" value="'+this.goodsCode+'"><input type="hidden" name="qty" id="qty" value="'+this.qty+'">' */
                +'</td>';

                if(this.detailMawb == "" || this.detailHawb == ""){
                    contents += '<td align="center"  width="10%"><input type="text" class="inST100"  name="batchNo" id="batchNo" maxlength="10" value = "'+this.batchNo+'"/></td>'
                       +'<td align="left"  width="15%"><input type="text" class="inST70"  maxlength="10" name="expireDate" id="expireDate'+rowNum+'" value = "'+this.expireDate+'"/></td>';
                       
                       makeCalenderIndex.push(rowNum);
                }else{
                    contents += '<td align="center"  width="10%">'+this.batchNo+'</td>'
                       +'<td align="center"   width="15%">'+this.expireDate+'</td>';
                }
                
                
                if(this.detailMawb == "" || this.detailHawb == ""){
                	contents += '<td align="center"  width="10%"><input type="text" class="inSTR100" name="goodsCode" id="goodsCode" readonly onFocus="blur();" value="'+this.goodsCode+'" /></td>'
                	   + "<td align='left'   width='35%'><input type='text' class='inSTR90'  style='margin-top:3px;' name='goodsName' readonly onFocus='blur();' value='"+this.goodsName+"'/><img src='/images/web/bkn_zoom.gif' id='popImg' align='center' onclick='onProductPopup(this);'></td>"
	                    +'<td align="right" width="15"><input type="text" class="inST100"  name="qty" onkeydown="onlyNum(event);" maxlength="7" value="'+this.qty+'"/></td>'
	                    +'<td align="center"  width="10%"><input type="text" class="inSTR100" name="unit" readonly onFocus="blur();" value="'+this.unit+'"/></td>';
	                    
                }else{
                	contents +='<td align="center"  width="10%">'+this.goodsCode+'</td>'
                    +'<td align="left"   width="35%">'+this.goodsName+'</td>'
                    +'<td align="right" width="15">'+this.qty+'</td>'
                    +'<td align="center"  width="10%"">'+this.unit+'</td>';	
                }
                

                if(this.detailMawb == "" || this.detailHawb == "" || $("#arrDate").val() != ""){
                    contents += '<td align="center"  width="5%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>';
                }else{
                	if($("#roleId").val() == "3"){
                		contents += '<td align="center"  width="5%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>';
                	}else{
                		contents += '<td align="center"> <img src="images/web/ic_up.gif" alt="Upate" align="center" id="onUpate" onclick="viewDialogOpen('+this.ordSeq+' , \''+this.batchNo+'\',\''+this.expireDate+'\',\''+this.qty+'\')"> '
                        +'<img src="images/web/ic_x.gif" alt="Delete" align="right" id="onDelete" onclick="delOdrDetail('+this.ordSeq+','+rowNum+')"/> </td>' ;
                	}
                }
                contents +='</tr>';
        });
        $("table[id='packingDetailTable']").empty().append(contents);  // 조회 값 뿌리기
        
        if(makeCalenderIndex.length > 0){
            for(var i =0 ; i < makeCalenderIndex.length ; i++){
                calendar.makeCalender("expireDate"+makeCalenderIndex[i]);   
            }
        }
        
        //$("#saveStatus").val("UPDATE"); // 상태값 변경
        
    }
    
    /* 상품 팝업 버튼 */
    var objIndex = 0;
    function onProductPopup(obj){
        objIndex = $("table[id='packingDetailTable'] img[id='popImg']").index(obj);
        window.open('/productPop.html', 'changeProductPop', 'width=615, height=450, toolbar=no, location=no, status=no, menubar=no, scrollbars=no');
    }
    
    function productPopValue(goodsCode, goodsName, unit, boxQty, hsCode, productCode, custCode, custName){
        $("[name=goodsCode]").eq(objIndex).val(goodsCode);
        $("[name=goodsName]").eq(objIndex).val(goodsName);   
        $("[name=unit]").eq(objIndex).val(unit);      
    }
    
    
    <%--================================= FORM 컨트롤 ============================--%>

    /* 초기화 펑션 */
    function reSetFrm(){
            $("form[name='packingFrm']").each(function(){
                this.reset();
          });
          
          //reSetValidete(); //벨류데이션 체크 초기화;
          $("#cnt").html("(0 / ");  // textarea 초기화
          $("#mawb").attr({        // ordNo1 입력가능하게
              onFocus : "",
              readonly: false
          });
          $("#hawb").attr({        // ordNo1 입력가능하게
              onFocus : "",
              readonly: false
          });
          
          $("#saveStatus").val("SAVE");     //신규 입력 상태로 변경
          $("span[id='delBtn']").show();
          $("span[id='addRow']").show();
          $("table[id='packingDetailTable']").empty();
    }
    
    
    function validation(){
 
        var mawb         = $("#mawb").val();
        var hawb         = $("#hawb").val();
        var sailingOn    = $("#sailingOn").val();
        
        if(mawb==null           || mawb=="") {   alert("MAWB No: Required fields."); $("#mawb").focus(); return false; }
        if(hawb==null           || hawb=="") {   alert("HAWB No: Required fields."); $("#hawb").focus(); return false; }
        //if(ordNo1.length < 5) {   alert("order No: Enter the 5 characters"); $("#ordNo1").focus(); return false; }
        
        if( !isValidDate(sailingOn,"Sailing on Date") ){ $("#sailingOn").focus(); return false; }
        
/*      var ordDate         = $("#ordDate").val();
        var originCode      = $("#originCode").val();
        var originName      = $("#originName").val();
        var packingDesc     = $("#packingDesc").val();
        var reqDate         = $("#reqDate").val();
        var priceBase       = $("#priceBase").val();
        var scheduleDate    = $("#scheduleDate").val();
        var portOfLoadName  = $("#portOfLoadName").val();
        var transMethodName = $("#transMethodName").val();
 */
        
        
/*      if(ordDate==null         || ordDate=="") { alert("ordDate 입려하시오."); $("#ordDate").focus(); return false; }
        if(originCode==null      || originCode=="") { alert("originCode 입려하시오."); $("#originCode").focus(); return false; }
        if(originName==null      || originName=="") { alert("originName 입려하시오."); $("#originName").focus(); return false; }
        if(packingDesc==null     || packingDesc=="") { alert("packingDesc 입려하시오."); $("#packingDesc").focus(); return false; }
        if(reqDate==null         || reqDate=="") { alert("reqDate 입려하시오."); $("#reqDate").focus(); return false; }
        if(priceBase==null       || priceBase=="") { alert("priceBase 입려하시오."); $("#priceBase").focus(); return false; }
        if(scheduleDate==null    || scheduleDate=="") { alert("scheduleDate 입려하시오."); $("#scheduleDate").focus(); return false; }
        if(portOfLoadName==null  || portOfLoadName=="") { alert("portOfLoadName 입려하시오."); $("#portOfLoadName").focus(); return false; }
        if(transMethodName==null || transMethodName=="") { alert("transMethodName 입려하시오."); $("#transMethodName").focus(); return false; }

        if( !isValidDate(ordDate,"ordDate") ){ $("#ordDate").focus(); return false; }
        if( !isValidDate(reqDate,"reqDate") ){ $("#reqDate").focus(); return false; }
        if( !isValidDate(scheduleDate,"scheduleDate") ){ $("#scheduleDate").focus(); return false; }
        
 */     

         for(var i=0 ; i < $("[name=batchNo]").length ; i++){
            var batchNoTmp = $("[name=batchNo]").eq(i).val();
            var expireDateTmp = $("[name=expireDate]").eq(i).val();
            var goodsCodeTmp = $("[name=goodsCode]").eq(i).val();
            var qtyTmp = $("[name=qty]").eq(i).val();
            
            if(batchNoTmp==null   || batchNoTmp=="") { alert("Batch: Required fields."); $("[name=batchNo]").eq(i).focus(); return false; }
            if(expireDateTmp==null || expireDateTmp=="") { alert("Expired Date: Required fields."); $("[name=expireDate]").eq(i).focus(); return false; }
            if(goodsCodeTmp==null || goodsCodeTmp=="") { alert("goodsCode: Required fields."); $("[name=goodsCode]").eq(i).focus(); return false; }
            if(qtyTmp==null || qtyTmp=="") { alert("qty: Required fields."); $("[name=qty]").eq(i).focus(); return false; }
            if( !isValidDate(expireDateTmp,"Expired Date") ){ $("[name=expireDate]").eq(i).focus(); return false; }

        }
      
      return true;      
    } 

    /* textarea 체크 */
    var oldStr;
    function textAreaKyUp(val){
        var str = val;
        if(str.length <= 200){
            oldStr = str;
            contents = "("+str.length+" / ";
            $("#cnt").html(contents);
        }else{
            //alert("제한된 문자열을 초과 했습니다.");
            alert("over length!!");
            $("#remark").val(oldStr);
        }
    };
    
    /************************************************************************/
    /*                          view POPUP , 리턴값처리                     */
    /************************************************************************/
    function viewDialogOpen(ordSeq, batchNo, expireDate, qty){
        $("#pop_ordSeq").val(ordSeq);
        $("#pop_batchNo").val(batchNo);
        $("#pop_expireDate").val(expireDate);
        $("#pop_qty").val(qty);

        $("#viewDialog").dialog({
            modal:true, 
            width:300,
            title:"Detail Update"
        });
    }


    /* detail update*/
    function detailUpdate(){

/*         if(confirm("Update?")){ */
            $.post("/packingDetailUpdate.json",{
                ordNo1          : $("#ordNo1").val(),
                ordNo2          : $("#ordNo2").val(),
                ordPseq         : $("#ordPseq").val(),
                mawb            : $("#mawb").val(),
                hawb            : $("#hawb").val(),
                ordSeq          : $("#pop_ordSeq").val(),
                batchNo         : $("#pop_batchNo").val(),
                expireDate      : $("#pop_expireDate").val(),
                qty             : $("#pop_qty").val()
            },function(data){
                if(data.result == true){
                    $("#viewDialog").dialog("close");
                    view($("#ordNum").val() , $("#ordNo1").val() , $("#ordNo2").val() ,$("#ordPseq").val() ,$("#mawb").val(), $("#hawb").val());
                }
            });
/*         } */
    }

    /* 오더 검색 팝업 버튼 */
    function orderNumPopCall(){
        window.open('/packingNumPop.html', 'orderNumPop', 'width=415, height=520, toolbar=no, location=no, status=no, menubar=no, scrollbars=no');
    };
       
    function detailClose(){
        $("#viewDialog").dialog("close");
        view($("#ordNum").val() , $("#ordNo1").val() , $("#ordNo2").val() ,$("#ordPseq").val() ,$("#mawb").val(), $("#hawb").val());
    }
    
</script>
</head>


<body>
<div class="wrap">
    <div class="pagetitle">
        <h1>PACKING LIST</h1>
    </div>
    <div class="">
    <!-- 레이어 팝업시작 -->
        <div id="viewDialog" style="display: none; background: white;">
         <input type="hidden" id="pop_ordSeq">
           <table class="TableST">
             <tr>
               <th>Batch</th>
               <td><input type="text" name="pop_batchNo" id="pop_batchNo" class="inST50" maxlength="10"/></td>
              </tr>
             <tr>
               <th>Expired Date</th>
               <td><input type="text" name="pop_expireDate" id="pop_expireDate" class="inST70" maxlength="10"/></td>
              </tr>
             <tr>
               <th>Quantity</th>
               <td><input type="text" name="pop_qty" id="pop_qty" class="inST50" onkeydown="onlyNum(event);" maxlength="10"/></td>
              </tr>
             <tr>
           </table>
            <div class="bo_btn">
                <ul class="btnst"><li class="a"><a href="javascript:detailUpdate();" id="save" >Save</a></li></ul>
                <ul class="btnst"><li class="a"><a href='javascript:detailClose();' >CLOSE</a></li></ul>
            </div>    
       </div>
    <!-- 레이어 팝업끝 -->   

    <input type="hidden" id ="arrDate" name="arrDate"/>
    
           
    <form name="packingFrm" method="post" action="/savePacking.json"> <%--리턴값 json으로 설정 --%>
    <input type="hidden" id ="saveStatus" name="saveStatus" value="SAVE" />     <%-- 조회, 수정, 초기화, 최초 입력 시 필요 (최초, 초기화 후 = SAVE   ,  수정, 조회 후 = UPDATE)--%>
    <input type="hidden" id ="ordNo1" name="ordNo1"/>
    <input type="hidden" id ="ordNo2" name="ordNo2"/>
    <input type="hidden" id ="ordPseq" name="ordPseq"/>
    
        <table class="TableST">
            <tr>
                <th>Order No</th>
                <td colspan="3">
                    <input type="text" class="inSTR30" id="ordNum" name="ordNum" readonly onFocus="blur();" value=""/>
                    <img alt="Search" height="16" id="orderNumPop"  onclick="orderNumPopCall();" src='/images/web/bkn_zoom.gif' align='absmiddle'>
                </td>
                    
            </tr>
            <tr>
                <th>MAWB</th>
                <td><input type="text" class="inST90" id="mawb" name="mawb" maxlength="20" value=""></td>
                <th class="thST2">HAWB</th>
                <td>
                    <input type="text" class="inST90" id="hawb" name="hawb" maxlength="20" value=""/>
                </td>
            </tr>
            <tr>
                <th >Shipper</th>
                <td colspan="2">
                    <input type="text" class="inSTR10" id="sCustCode" name="sCustCode" readonly onFocus="blur();" value=""/>
                    <input type="text" class="inSTR80" style="width:85%;" id="sCustName" name="sCustName" readonly onFocus="blur();" value=""/></td>
                <td><input type="text" class="inSTR90" id="sAddr1" name="sAddr1" readonly onFocus="blur();" value=""/></td>
            </tr>
            <tr>
                <th> </th>
                <td><input type="text" class="inSTR100"id="sTel" name="sTel" readonly onFocus="blur();" value=""/></td>
                <td><input type="text" class="inSTR90" id="sFax" name="sFax" readonly onFocus="blur();" value=""/></td>
                <td><input type="text" class="inSTR90" id="sAddr2" name="sAddr2" readonly onFocus="blur();" value=""/></td>
            </tr>
            <tr>
                <th >Messrs</th>
                <td colspan="2">
                    <input type="text" class="inSTR10" id="mCustCode" name="mCustCode" readonly onFocus="blur();" value=""/>
                    <input type="text" class="inSTR80" style="width:85%;" id="mCustName" name="mCustName" readonly onFocus="blur();" value=""/></td>
                <td><input type="text" class="inSTR90" id="mAddr1" name="mAddr1" readonly onFocus="blur();" value=""/></td>
            </tr>
            <tr>
                <th></th>
                <td><input type="text" class="inSTR100" id="mTel" name="mTel" readonly onFocus="blur();" value=""/></td>
                <td><input type="text" class="inSTR90"  id="mFax" name="mFax" readonly onFocus="blur();" value=""/></td>
                <td><input type="text" class="inSTR90"  id="mAddr2" name="mAddr2" readonly onFocus="blur();" value=""/></td>
            </tr>
            <tr>
                <th >Notify Party</th>
                <td colspan="2">
                    <input type="text" class="inSTR10" id="nCustCode" name="nCustCode" readonly onFocus="blur();" value=""/>
                    <input type="text" class="inSTR80" style="width:85%;" id="nCustName" name="nCustName" readonly onFocus="blur();" value=""/></td>
                <td><input type="text" class="inSTR90" id="nAddr1" name="nAddr1" readonly onFocus="blur();" value=""/></td>
            </tr>
            <tr>
                <th></th>
                <td><input type="text" class="inSTR100" id="nTel" name="nTel" readonly onFocus="blur();" value=""/></td>
                <td><input type="text" class="inSTR90"  id="nFax" name="nFax" readonly onFocus="blur();" value=""/></td>
                <td><input type="text" class="inSTR90"  id="nAddr2" name="nAddr2" readonly onFocus="blur();" value=""/></td>
            </tr>
            <tr> 
                <th>Packing</th>
                <td colspan="3">
                    <input type="text" class="inST97" id="packing" name="packing" maxlength="100" value=""/>
                </td>
            </tr>
            <tr>
                <th>Stored at</th>
                <td colspan="3">
                    <input type="text" class="inST97" id="storedAt" name="storedAt" maxlength="100" value=""/>
                </td>
            </tr>
            <tr>
                <th>Loding</th>
                <td><input type="text" class="inST90" id="loading" name="loading" maxlength="30" value=""></td>
                <th class="thST2">Destination</th>
                <td>
                    <input type="text" class="inST90" id="destination" name="destination" maxlength="30" value=""/>
                </td>
            </tr>
            <tr>
                <th>Sailing on</th>
                <td>
                    <input type="text" class="inST80" id="sailingOn" name="sailingOn" maxlength="10" value=""/>
                </td>
                <th class="thST2">Net-Weight</th>
                <td>
                    <input type="text" class="inST90" id="net" name="net" maxlength="20" value=""/>
                </td>
            </tr>
            <tr>
                <th>Carrior</th>
                <td><input type="text" class="inST90" id="carrien" name="carrien" maxlength="20" value=""></td>
                <th class="thST2">Gross-Weight</th>
                <td>
                    <input type="text" class="inST90" id="gross" name="gross" maxlength="20" value=""/>
                </td>
            </tr>
            <tr>
                <th>Carton</th>
                <td width="290px"><input type="text" class="inST90" id="carton" name="carton" maxlength="20" value=""></td>
                <th class="thST2">Cubic-M</th>
                <td>
                    <input type="text" class="inST90" id="cubic" name="cubic" onkeydown="onlyNum(event);" value=""/>
                </td>
            </tr>
        </table>
        <br />
        <div class="bo_btn" id="bo_btn_add" style="display: block;">
            <span id="addRow"><ul class="btnst"><li class="a"><a href="#" id="detailAddRow" >ADD</a></li></ul></span>
        </div>
        
        <div class="taHeadW">
            <table class="TableST2Head" >
                <tr>
                    <th width="5%">No</th>
                    <th width="10%">Batch</th>
                    <th width="15%" align="Center">Expired Date</th>
                    <th width="10%">Code</th>
                    <th width="31%">Description</th>
                    <th width="12%">Quantity</th>
                    <th width="10%">Unit</th>
                    <th width="12%">U / D</th>
                </tr>
            </table>
        </div>
        <div class="taBodyW">
            <table class="TableST2Body" id="packingDetailTable">
            </table>
        </div>    
        <br />
        <table class="TableST3">
            <tr>
                <th width="20%">Remarks<br><span id="cnt">(0 / </span>200)</th>
                <td><textarea class="teST80" wrap="virtual" id="remark" onkeyup="textAreaKyUp(this.value);" name="remark"></textarea></td>
            </tr>
        </table>
    </div>
    <div class="bo_btn" id="bo_btn" style="display: block;">
        <ul class="btnst"><li class="a"><a href="#" id="reSetBtn" >INIT</a></li></ul>
        <ul class="btnst"><li class="a"><a href="#" id="searchBtn" >SEARCH</a></li></ul>
        <ul class="btnst"><li class="a"><a href="#" id="saveBtn" >SAVE</a></li></ul>
        <span id="delBtn"><ul class="btnst"><li class="a"><a href="#" id="deleteBtn" >DELETE</a></li></ul></span>
    </div>
    <input type="hidden" name="roleId" id="roleId" value="${requestScope.roleId}">
    </form>
</div>
</body>
</html>